<template>
  <div class="edit-channel">
    <!-- 我的频道 -->
    <van-cell class="my-cell">
      <span slot="title" class="left-title">我的频道</span>
      <van-button @click="isEdit = !isEdit" color="green" plain round size="mini" type="default">
        {{ isEdit ? '完成' : '编辑' }}
      </van-button>
    </van-cell>
    <!-- 我的频道列表 -->
    <van-grid class="list-grid my-grid" :gutter="10">
      <van-grid-item
      :class="{active: index === active}"
      v-for="(item, index) in channels"
      :key="item.id"
      :icon="(isEdit && index !== 0) ? 'close' : ''"
      :text="item.name"
      @click="myChannelClick(index, item.id)"
      />
    </van-grid>

    <!-- 推荐频道 -->
    <van-cell :border="false" class="recommend-cell">
      <span slot="title" class="left-title">推荐频道</span>
    </van-cell>
    <!-- 推荐频道列表 -->
    <van-grid direction="horizontal" class="list-grid recommend-grid" :gutter="10">
      <van-grid-item @click="recommendClick(item)" v-for="item in recommendChannels" :key="item.id" icon="plus" :text="item.name" />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannels, delUserChannels } from '@/api/channel.js'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
const HMTT_CHANNEL = 'hmtt_channel'
export default {
  data () {
    return {
      allChannels: [],
      isEdit: false // 控制是否处于编辑状态
    }
  },

  props: {
    // 父组件的频道列表
    channels: {
      type: Array,
      required: true
    },
    // 父组件的频道选中的索引
    active: {
      type: Number,
      required: true
    }
  },

  computed: {
    // 通过计算得到推荐频道的数据
    recommendChannels () {
      // 利用所有的频道 - 我的 频道的数据 = 推荐频道的数据
      // 循环所有的频道 拿到每一项的数据 item(所有频道数据的item)
      // 如果 我的 频道 有 item 不属于 推荐频道
      // 如果 我的 频道 没有 item 属于 推荐频道

      // 拿item 去 我的频道 找
      // 找到了这个数据 属于我的 不属于推荐 filter应该返回false
      // 没找到了这个数据 不属于我的 属于推荐 filter应该返回true
      // find
      // 返回值就是找到的那一项数据 对象
      // 没找到返回 undefined
      return this.allChannels.filter(item => {
        return !this.channels.find(channelItem => item.id === channelItem.id)
      })
    },
    ...mapState(['user'])
  },

  created () {
    this.loadChannels()
  },

  methods: {
    // 加载频道列表
    async loadChannels () {
      try {
        const { data: res } = await getAllChannels()
        this.allChannels = res.data.channels
      } catch (err) {
        this.$toast('获取失败')
      }
    },
    // 点击了推荐频道
    async recommendClick (item) {
      // this.channels = []
      this.channels.push(item)
      // 持久化存储
      // 判断
      if (this.user) {
        // 登录了
        try {
          await addUserChannels({
            id: item.id,
            seq: this.channels.length
          })
          this.$toast.success('添加成功')
        } catch (err) {
          this.$toast('添加失败')
        }
      } else {
        // 未登录
        setItem(HMTT_CHANNEL, this.channels)
      }
    },
    // 点击了我的频道
    myChannelClick (index, id) {
      // 判断是否处于编辑状态
      if (this.isEdit) {
        if (index === 0) return
        // 处于编辑 进行删除
        if (index <= this.active) {
          this.$emit('sendData', {
            close: true,
            active: this.active - 1
          })
        }
        // 删除数据
        this.channels.splice(index, 1)
        // 数据持久化
        this.deleteChannelsStorage(id)
      } else {
        // 没有处于编辑状态
        // 能够触发当前组件标签上的一个自定义事件
        this.$emit('sendData', {
          close: false,
          active: index
        })
      }
    },
    // 删除数据持久化
    async deleteChannelsStorage (id) {
      if (this.user) {
        // 数据存到数据库
        try {
          await delUserChannels(id)
          this.$toast.success('删除成功')
        } catch (err) {
          this.$toast('删除失败')
        }
      } else {
        // 数据存到本地
        setItem(HMTT_CHANNEL, this.channels)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.edit-channel {
  padding-top: 70px;
  // 我的频道的cell单元格
  .my-cell {
    align-items: center;
    &::after {
      border: none;
    }
    .left-title {
      font-size: 32px;
      color: #333;
    }

    .van-button--default {
      padding: 5px 20px;
    }
  }

  // 我的频道的宫格
  /deep/.my-grid {
    .van-grid-item__icon + .van-grid-item__text {
      margin-top: 0px;
    }
    .van-icon-close {
      font-size: 34px;
      position: absolute;
      right: -13px;
      top: -13px;
    }

    .active {
      .van-grid-item__text {
        color: red;
      }
    }
  }

  // 推荐的cell单元格
  .recommend-cell {
    .left-title {
      font-size: 32px;
      color: #333;
    }
  }

  // 公共样式
  /deep/.list-grid {
    .van-grid-item {
      height: 86px;
      .van-grid-item__content {
        background-color: #f4f5f6;
        border-radius: 6px;
        &::after {
          border: none;
        }
      }
    }
  }

  // 推荐频道宫格样式
  /deep/.recommend-grid {
    .van-grid-item__icon {
      font-size: 24px;
    }
  }
}
</style>
